<template>
<div>
  <info-image :infoImg="infoImg" :imageList="imageList"></info-image>
  <!--遮罩-->
  <img-mask :imageList="imageList" v-if="this.$store.state.flag"></img-mask>
  <!--树形结构-->
  <treeList :treeData="treeData"></treeList>
</div>
</template>

<script>
import infoImage from "./images.vue";
import imgMask from "./mask.vue";
import treeList from "./treeList.vue"
export default {
  data(){
   return {
       infoImg:[],
       imageList:[],
       treeData:[],
    }
  },
  components:{
    infoImage,imgMask,treeList
  },
  watch:{
    flag(val){
      console.log(1)
    }
  },
  methods: {
    //获取图片数据
    grtImages(){
      this.$http.get("http://www.qunar/images.com").then(res=>{
        if(res.data.status == 200){
          this.infoImg = res.data.data
          this.imageList = res.data.data[0].list
        }
      })
    },
    //获取树形结构数据
    getTreeData(){
      this.$http.get("http://www.qunar/ticket.com").then(res=>{
        if(res.data.status == 200){
          this.treeData = res.data.data
        }
      })
    }
  },
  created(){
    this.grtImages()
    this.getTreeData()
  }
}
</script>

<style lang="less">
body,ul,h4,li{
margin: 0;
padding: 0;
}
ul{
  list-style: none;
}
h4{
  font-weight: normal;
}
</style>